<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <script src="../build/react.development.js"></script>
  <script src="../build/react-dom.development.js"></script>
  <script src="../build/babel.min.js"></script>
</head>

<body>
  <div id="example"></div>
  <script type="text/babel">
      // 
      class Hello extends React.Component {
        state = {
            opacity: 1.0,
            beAdd :false
          };
        constructor(props) {
          super(props)
        }
       
        componentDidMount() {
          
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            var beAdd = this.state.beAdd;
            
            if ((beAdd || opacity < 0.1) &&(opacity<1) )  {
              
              opacity += 0.09;
              if(opacity<0.2 ){
                beAdd = true;
            }
            }else  {
              if(opacity===1){
                beAdd=false;
              }
              opacity -= .09;
            }
            // 变量参与过运算后,得重新在setState中再做一次赋值
            this.setState({
              opacity: opacity,
              beAdd :beAdd
            });
          }.bind(this), 1000);
        }

        render() {
          return (
            <div style={{opacity: this.state.opacity}} >
              Hello {this.props.name}
            </div>
          );
        }
      }
        
      ReactDOM.render(
        <Hello name="world"/>,
        document.getElementById('example')
      );
    </script>
</body>

</html>